<template>
    <div style="width: 100%;">
        <el-cascader v-model="formdata.resultValue" :options="optionsData" :props="optionsProps" @change="handleChange"
            style="width: 100%;" />
    </div>
</template>
  
<script setup>

import { onMounted, reactive, toRefs, watch } from "vue";

import {
    getTypeData,// 类型
} from "@/hooks"

const emits = defineEmits(['successAction'])


const props = defineProps({
    dataInfo: {
        type: Object,
        default: () => { }
    }
})

watch(props.dataInfo, (newVal) => {
    console.log(props.dataInfo,'dataInfo',newVal)
    if (newVal.firstClassifyId) {
        state.formdata.resultValue.push(newVal.firstClassifyId)
    }
    if (newVal.secondClassifyId) {
        state.formdata.resultValue.push(newVal.secondClassifyId)
    }
    // console.log(state.formdata.resultValue,'state.formdata.resultValue')
}, { deep: true })

const state = reactive({
    formdata: {
        resultValue: [],
    },
    optionsData: [],
    resultData: [],
    optionsProps: {
        value: "id",
        label: "name",
    }
})

const { formdata, optionsData, optionsProps } = toRefs(state)

const handleChange = (ev) => {
    console.log(ev)
    emits('successAction', ev)
}

const typeFn = (data) => {
    data.forEach(o => {
        let arr = state.resultData.filter(o2 => o.id == o2.parentId)
        o.children = arr
    });
    return data
}

onMounted(async () => {
    let { returnData: typeDataFn } = getTypeData()
    let typeData = await typeDataFn()
    state.resultData = typeData.data
    state.optionsData = typeData.data.filter(o => o.parentId == 0)
    typeFn(state.optionsData)
    console.log(state.optionsData)
})
</script>
  